<template>
	<view>
		<view class="top u-f-dcc">
			<view>{{ sumRefillWeight | kg2ton }}</view>
			<view>总补液量(吨)</view>
		</view>
		<view class="list-wrap">
			<view class="title-bar u-f-jsb">
				<view class="types u-f">
					<text :class="{ active: typeIdx === 2 }" @tap="setType(2)">全部</text>
					<text :class="{ active: typeIdx === 0 }" @tap="setType(0)">手工补液</text>
					<text :class="{ active: typeIdx === 1 }" @tap="setType(1)">自动补液</text>
				</view>
				<view @tap="show = !show" style=" white-space: pre-wrap;" v-text="dateText"></view>
			</view>
			<ym-date-selector :show.sync="show" :isfixedTop="false" @selected="timeSelected"></ym-date-selector>
		</view>
		<view class="list">
			<view class="item" v-for="record in records" :key="item.recordType" @tap="$jumpPage(`/pages/supplyRecords/detail?recordId=${record.recordId}`)">
				<view class="item-t u-f-jsb">
					<view class="u-f-dc">
						<text class="site-name">{{ record.siteName }}</text>
						<text class="subtitle">{{ record.NAME }}</text>
					</view>
					<view>{{ record.recordType === 0 ? '手工补液' : '自动补液' }}</view>
				</view>
				<view class="item-c">
					<view class="u-f-jsb">
						<text>本次补液量(吨)</text>
						<text>{{ record.actualRefillWeight | kg2ton }}</text>
					</view>
					<view class="u-f-jsb">
						<text>完成时间</text>
						<text>{{ record.endTime }}</text>
					</view>
				</view>
			</view>
			<view class="no-data" v-if="records.length===0">
				<u-icon name="error-circle" size="40"></u-icon>
				<view style="margin-left: 20rpx;">暂无记录</view>
			</view>
		</view>
	</view>
</template>

<script>
import ymDateSelector from '@/components/ym-date-selector/ym-date-selector.vue';
export default {
	components: { ymDateSelector },
	data() {
		return {
			typeIdx: 2, // 2--全部  0-- 手工补液  1--自动补液
			show: false,
			dateText: '',
			sumRefillWeight: 0,
			records: []
		};
	},
	onLoad() {
		this.dateText = this.$u.timeFormat(Date.now(), 'yyyy年mm月');
		this.date1 = this.$u.timeFormat(Date.now(), 'yyyy-mm');
		this.date2 = this.$u.timeFormat(Date.now(), 'yyyy-mm');
		this.getRecordList();
	},
	methods: {
		timeSelected(time) {
			console.log(time);
			const { date1, date2, isDayMode } = time;
			this.date1 = date1;
			this.date2 = date2;
			this.isDayMode = isDayMode;
			if (isDayMode) {
				this.dateText = `${date1}\n${date2}`;
			} else {
				let dateArr = date1.split('-');
				this.dateText = `${dateArr[0]}年${dateArr[1]}月`;
			}
			this.getRecordList();
		},
		getRecordList() {
			let { typeIdx, isDayMode = '', date1 = '', date2 = '' } = this;
			if (typeIdx == 2) {
				typeIdx = '';
			}
			this.$u.api._getRecordList({ recordType: typeIdx, refillStartTime: date1, refillEndTime: date2, timeType: isDayMode?1:2 }).then(res => {
				console.log(res);
				this.records = res.list;
				this.sumRefillWeight = res.sumRefillWeight;
			});
		},
		setType(type) {
			this.typeIdx = type;
			this.getRecordList();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f0f0f0;
}
.top {
	position: fixed;
	top: 0;
	width: 100vw;
	height: 248rpx;
	padding: 60rpx 0;
	background-color: #ffffff;
	> view:nth-child(1) {
		font-weight: 800;
		font-size: 46rpx;
	}
	> view:nth-child(2) {
		font-weight: 600;
		font-size: 36rpx;
		color: #888;
	}
}
.list-wrap {
	position: fixed;
	top: 228rpx;
	width: 100vw;
	border-bottom: 1rpx solid #f0f0f0;
	.title-bar {
		height: 100rpx;
		align-items: center;
		padding: 0 30rpx 0 10rpx;
		background-color: #ffffff;

		.types {
			> text {
				margin: 20rpx;
				transition: transform 0.1s;
				color: #333333;
				&.active {
					font-weight: 800;
					transform: scale(1.2);
					color: $uni-color-primary;
				}
			}
		}
	}
}
.list {
	margin-top: 320rpx;
	padding: 20rpx;
	overflow-y: scroll;
	.item {
		border-radius: 20rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		.item-t {
			border-bottom: 1rpx solid #eee;
			height: 100rpx;
			padding: 0 30rpx;
			.subtitle {
				font-size: 26rpx;
				font-weight: 400;
			}
			.site-name {
				font-weight: 800;
				color: #333333;
			}
		}

		.item-c {
			padding: 30rpx;
			> view > text:nth-child(1) {
				color: #888;
				font-weight: 600;
			}
		}
	}
	
	.no-data {
		height: 300rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
